<template>
	<div id="bigBox">
		<div class="background">
			<img :src="imgSrc" width="100%" height="100%" alt />
		</div>
		<h1>欢迎使用潇湘大药房</h1>
		<div class="inputBox">
			<div class="inputText">
				<!-- span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。 -->
				<span class="fa fa-user-o" aria-hidden="true"></span>
				<input type="text" placeholder="请输入用户名" v-model="username" />
			</div>
			<div class="inputText">
				<span class="fa fa-key" aria-hidden="true"></span>
				<input type="password" placeholder="请输入密码" v-model="password" />
			</div>
			<div>
				<a class="register" v-on:click="Register">没有账号就先注册吧</a>
			</div>
			<input type="button" v-on:click="Login" class="inputButton" value="登录" />
			<input type="button" class="inputButton" value="忘记密码" />
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data() {
			return {
				imgSrc: require("../../assets/Loginbackground.jpg"),
				username: '',
				password: ''
			}
		},
		methods: {
			Login() {
				//axios 获取网络
				var that = this
				console.log(this.username)
				this.$axios.post("http://localhost:8088/xiaoxiang/findloginuser", {
					userName: this.username,
					password: this.password
				}).then(function(res) { //请求成功
					//回调方法里的this，只是调用方法体里面的参数，所以需要在外面将this定义好 JQuery
					console.log(res.data.data)
					if (res.data.code === 1) {
						console.log("登录成功")
						that.$router.push("/HomePage/" + that.username)
					} else {
						console.log("登录失败")
						if (res.data.code ===500) {
							alert("用户名或者密码错误，请重新输入")
							
							// window.location.href = 'fail.html'
						}
					}
				}).catch(function(err) { //请求失败
					console.log(err)


				})
			},
			Register() {
				console.log("点击了注册")
				this.$router.push("/Logins/Register")
			}
		}
	}
</script>

<style src="../../config/font-awesome-4.7.0/css/font-awesome.css"></style>
<style scoped>
	/*@import "src/config/font-awesome-4.7.0/css/font-awesome.css";*/
	#bigBox .background {
		width: 100%;
		height: 100%;
		/**宽高100%是为了图片铺满屏幕 */
		z-index: -1;
		position: fixed;
		top: 0px;
		/*这里是设置与顶部的距离*/
		left: 0px;
		/*这里是设置与左边的距离*/
		bottom: 0px;
		right: 0px;
	}


	#bigBox {
		margin: 0 auto;
		margin-top: 200px;
		/* 	上内边距和下内边距是 20px
            右内边距和左内边距是 50px */
		padding: 20px 50px;
		background-color: #00000090;
		width: 400px;
		height: 300px;
		/* border-radius这个属性算是非常常用的属性之一了，
        通过设置元素的border-radius值，可以轻松给元素设置圆角边框，
        甚至实现绘制圆、半圆、四分之一的圆等各种圆角图形。 */

		/* 常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，
        即可给元素的四个边角设置统一的圆角弧度,根据px的大小来改变 */
		border-radius: 10px;
		text-align: center;
	}

	#bigBox h1 {
		color: white;
	}

	#bigBox .inputBox {
		margin-top: 50px;
	}

	#bigBox .inputBox .inputText {
		margin-top: 20px;
	}

	#bigBox .inputBox .inputText input {
		/* 边框 */
		border: 0;
		padding: 10px 10px;
		/* 设置下边框大小为1px,实线,颜色为白色. */
		border-bottom: 1px solid white;
		background-color: #00000000;
		color: white;
	}

	#bigBox .inputBox .inputText span {
		color: white;
	}

	#bigBox .inputBox .register {
		width: 150px;
		height: 20px;
		margin-top: 20px;
		/* 用了颜色轻柔 */
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
	}

	#bigBox .inputBox .inputButton {
		border: 0;
		width: 150px;
		height: 20px;
		color: white;
		margin-top: 30px;
		border-radius: 20px;
		/* 用了颜色轻柔 */
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
	}
</style>
